<template>
    <div class="activity-application-detail">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="申请编号">
          {{ application.id }}
        </el-descriptions-item>
        <el-descriptions-item label="申请类型">
          {{ getApplicationType(application.type) }}
        </el-descriptions-item>
        <el-descriptions-item label="申请状态"
          ><el-tag :type="getStatusType(application.status)">
            {{ application.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请日期">
          {{ formatDate(application.applyDate) }}
        </el-descriptions-item>
      </el-descriptions>
  
      <el-descriptions title="申请人信息" :column="2" border class="mt-4">
        <el-descriptions-item label="用户编号">
          {{ application.user.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ application.user.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年级">
          {{ application.user.grade }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ application.user.major }} </el-descriptions-item
        ><el-descriptions-item label="班级">
          {{ application.user.class }} </el-descriptions-item
        ><el-descriptions-item label="联系方式">
          {{ application.user.contact }}
        </el-descriptions-item>
      </el-descriptions>
  
      <!-- 举办活动申请 -->
      <template v-if="application.type === 8">
        <el-descriptions title="活动信息" :column="2" border class="mt-4">
          <el-descriptions-item label="活动名称">
            {{ application.activityInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="活动标题">
            {{ application.activityInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item label="活动开始时间">
            {{ formatDate(application.activityInfo.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="活动结束时间">
            {{ formatDate(application.activityInfo.endTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="活动状态">
            <el-tag
              :type="getActivityStatusType(application.activityInfo.status)"
            >
              {{ application.activityInfo.status }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div class="activity-content mt-4">
          <h3>活动文章正文</h3>
          <el-input
            type="textarea"
            v-model="application.activityInfo.content"
            :rows="6"
            readonly
          />
        </div>
      </template>
  
      <!-- 取消活动申请 -->
      <template v-if="application.type === 9">
        <el-descriptions title="取消活动信息" :column="2" border class="mt-4">
          <el-descriptions-item label="活动编号">
            {{ application.activityInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item label="活动名称">
            {{ application.activityInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="活动开始时间">
            {{ formatDate(application.activityInfo.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="活动结束时间">
            {{ formatDate(application.activityInfo.endTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
  
      <!-- 修改活动信息申请 -->
      <template v-if="application.type === 10">
        <el-descriptions title="修改后活动信息" :column="2" border class="mt-4">
          <el-descriptions-item label="活动编号">
            {{ application.activityInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item label="活动名称">
            {{ application.activityInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="活动标题">
            {{ application.activityInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item label="活动开始时间">
            {{ formatDate(application.activityInfo.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="活动结束时间">
            {{ formatDate(application.activityInfo.endTime) }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="activity-content mt-4">
          <h4>修改后活动文章正文</h4>
          <el-input
            type="textarea"
            v-model="application.activityInfo.content"
            :rows="6"
            readonly
          />
        </div>
      </template>
  
      <div class="application-reason mt-4">
        <h4>申请原因</h4>
        <el-input
          type="textarea"
          v-model="application.reason"
          :rows="4"
          readonly
        />
      </div>
  
      <div class="review-info mt-4">
        <h3>审核信息</h3>
        <el-descriptions :column="2" border v-if="application.review.id">
          <el-descriptions-item label="审核结果">
            <el-tag :type="getStatusType(application.review.result)">
              {{ application.review.result }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ formatDate(application.review.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人">
            {{ application.review.userVO.userName }} </el-descriptions-item
          ><el-descriptions-item label="审核人联系方式">
            {{ application.review.userVO.phoneNumber }}
          </el-descriptions-item>
        </el-descriptions>
        <el-input
          v-if="application.review.id"
          type="textarea"
          v-model="application.review.content"
          :rows="4"
          readonly
          placeholder="审核意见"
          class="mt-2"
        /><el-empty v-else description="暂无审核信息" />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import {
    ElMessage,
    ElTag,
    ElDescriptions,
    ElDescriptionsItem,
    ElInput,
    ElEmpty,
  } from "element-plus";
  import moment from "moment";
  import { useRoute } from "vue-router";
  import { ActivityApplicationControllerService } from "../../../../../generated";
  
  interface ActivityApplicationInfo {
    id: number;
    type: number;
    status: string;
    applyDate: string;
    reason: string;
    user: {
      id: number;
      name: string;
      grade: string;
      major: string;
      class: string;
      contact: string;
    };
    activityInfo: {
      id: number;
      name: string;
      title: string;
      content: string;
      startTime: string;
      endTime: string;
    };
    review: {
      id: number;
      result: string;
      content: string;
      createTime: string;
      userVO: {
        userName: string;
        phoneNumber: string;
      };
    };
  }
  
  const application = ref<ActivityApplicationInfo>({
    id: 0,
    type: 0,
    status: "",
    applyDate: "",
    reason: "",
    user: {
      id: 0,
      name: "",
      grade: "",
      major: "",
      class: "",
      contact: "",
    },
    activityInfo: {
      id: 0,
      name: "",
      title: "",
      content: "",
      startTime: "",
      endTime: "",
    },
    review: {
      id: 0,
      result: "",
      content: "",
      createTime: "",
      userVO: {
        userName: "",
        phoneNumber: "",
      },
    },
  });
  
  const getApplicationType = (type: number): string => {
    switch (type) {
      case 8:
        return "举办活动";
      case 9:
        return "取消活动";
      case 10:
        return "修改活动信息";
      default:
        return "";
    }
  };
  
  const formatDate = (date: string): string => {
    return moment(date).format("YYYY年MM月DD日 HH:mm:ss");
  };
  
  const getStatusType = (status: string) => {
    switch (status) {
      case "待审核":
        return "warning";
      case "通过":
        return "success";
      case "拒绝":
        return "danger";
      default:
        return "info";
    }
  };
  
  const getActivityStatusType = (status: string) => {
    switch (status) {
      case "待审核":
        return "warning";
      case "确认举办":
        return "success";
      case "进行中":
        return "primary";
      case "已结束":
        return "info";
      default:
        return "info";
    }
  };
  
  const loadData = async () => {
    const route = useRoute();
    const applicationId = Number(route.query.id);
    try {
      const res =
        await ActivityApplicationControllerService.getApplicationVoById2(
          applicationId,
        );
      if (res.code === 0 && res.data) {
        application.value = {
          id: res.data.id as number,
          type: res.data.type as number,
          status: res.data.reviewVO?.result as string,
          applyDate: res.data.createTime as string,
          reason: res.data.reason as string,
          user: {
            id: res.data.userVO?.id as number,
            name: res.data.userVO?.userName as string,
            grade: res.data.userVO?.grade as string,
            major: res.data.userVO?.major as string,
            class: res.data.userVO?.userClass as string,
            contact: res.data.userVO?.phoneNumber as string,
          },
          review: {
            id: res.data.reviewVO?.id as number,
            result: res.data.reviewVO?.result as string,
            content: res.data.reviewVO?.content as string,
            createTime: res.data.reviewVO?.createTime as string,
            userVO: {
              userName: res.data.reviewVO?.userVO?.userName as string,
              phoneNumber: res.data.reviewVO?.userVO?.phoneNumber as string,
            },
          },
        };
  
        const type = res.data.type as number;
        if (type === 8) {
          application.value.activityInfo = {
            id: 0,
            name: res.data.additionalInfo?.activityName as string,
            title: res.data.additionalInfo?.activityTitle as string,
            content: res.data.additionalInfo?.activityContent as string,
            startTime: res.data.startTime as string,
            endTime: res.data.endTime as string,
          };
        } else if (type === 9) {
          application.value.activityInfo = {
            id: res.data.activityVO?.id as number,
            name: res.data.additionalInfo?.activityName as string,
          };
        } else {
          application.value.activityInfo = {
            id: res.data.activityVO?.id as number,
            name: res.data.additionalInfo?.activityName as string,
            title: res.data.additionalInfo?.activityTitle as string,
            content: res.data.additionalInfo?.activityContent as string,
            startTime: res.data.startTime as string,
            endTime: res.data.endTime as string,
          };
        }
      } else {
        ElMessage.error("加载申请数据失败: " + res.message);
      }
    } catch (error) {
      console.error("加载数据时发生错误:", error.message || error);
      ElMessage.error("加载数据失败，请稍后重试");
    }
  };
  
  onMounted(() => {
    loadData();
  });
  </script>
  
  <style scoped>
  .activity-application-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .activity-content,
  .review-info {
    margin-bottom: 20px;
  }
  
  .application-reason {
    margin-bottom: 40px;
  }
  
  .mt-4 {
    margin-top: 1rem;
  }
  
  .mt-2 {
    margin-top: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .activity-application-detail {
      padding: 10px;
    }
  
    h3 {
      font-size: 16px;
    }
  }
  </style>